<!-- 新增服务 -->
<template>
    <!-- 弹窗组件 -->
    <div class="dialog-box">
       <el-dialog v-model="dialogVisible" title="新增客户等级" width="500">
          <el-form :model="form" label-width="100px">
             <el-row :gutter="20">
                <el-col :span="24">
                   <el-form-item label="服务名称" required>
                      <el-select v-model="form.service_id" placeholder="请选择服务项目">
                         <el-option v-for="item in options" :key="item.id" :label="item.title" :value="item.id" />
                      </el-select>
                   </el-form-item>
                </el-col>
             </el-row>
             <!-- 显示选中的服务名称 -->
             <el-row :gutter="20" v-if="form.service_name">
                <el-col :span="24">
                   <el-form-item label="选中服务">
                      <el-input v-model="form.service_name" readonly placeholder="自动显示选择的服务名称" />
                   </el-form-item>
                </el-col>
             </el-row>
          </el-form>
          <template #footer>
             <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button color="#626aef" @click="handleSubmit">
                   确定
                </el-button>
             </div>
          </template>
       </el-dialog>
    </div>
 </template>
 
 <script setup lang="ts">
 import api from "@/api";
 import { ElMessage } from "element-plus";
 import { ref, reactive, watch, computed } from "vue";
 const dialogVisible = ref<boolean>(false); // 弹窗控制器
 const form = ref<any>({
    service_id: "",
    service_name: "",
 });
 const options = ref<any[]>([]); // 服务列表

 // 监听service_id变化，自动设置service_name
 watch(() => form.value.service_id, (newServiceId) => {
    if (newServiceId && options.value.length > 0) {
       const selectedService = options.value.find(item => item.id === newServiceId);
       if (selectedService) {
          form.value.service_name = selectedService.title;
          console.log('自动设置服务名称:', selectedService.title);
       }
    }
 });

 //  获取服务下拉列表
const getServeList = async () => {
    const res = await api.consumablesSettings.getServiceItemList();
    if (res.code === 200) {
       options.value = res.data;
       console.log('服务列表获取成功:', res.data);
    }
}
 
 const openLoading = (item: any) => {
    dialogVisible.value = true;
    if (item) {
       // 编辑模式：填充现有数据
      form.value = { 
         id: item.id,
         service_id: item.service_id,
         service_name: item.service_name
      };
      console.log('编辑模式，填充数据:', form.value);
   } else {
      // 新增模式：重置表单
      form.value = {
         service_id: "",
         service_name: "",
      };
      console.log('新增模式，表单已重置');
   }
   getServeList();
 };
 
 const emit = defineEmits(["getServeList"]);
 const handleSubmit = async () => {
    // 确保service_name已设置
    if (form.value.service_id && !form.value.service_name) {
       const selectedService = options.value.find(item => item.id === form.value.service_id);
       if (selectedService) {
          form.value.service_name = selectedService.title;
       }
    }

    console.log('提交数据:', {
       service_id: form.value.service_id,
       service_name: form.value.service_name,
       id: form.value.id
    });

    if (form.value.id) {
       // 编辑模式
       const res = await api.consumablesSettings.editServe({
          id: form.value.id,
          service_id: form.value.service_id,
          service_name: form.value.service_name,
          warehouse_id:0
       });
       if (res.code === 200) {
          ElMessage.success("编辑成功");
          emit("getServeList");
       } else {
          ElMessage.error(res.message || "编辑失败");
       }
    } else {
       // 新增模式
       const res = await api.consumablesSettings.addServe({
          service_id: form.value.service_id,
          service_name: form.value.service_name
       });
       if (res.code === 200) {
          ElMessage.success("新增成功");
          emit("getServeList");
       } else {
          ElMessage.error(res.message || "新增失败");
       }
    }
    dialogVisible.value = false;
 };
 
 defineExpose({
    openLoading,
 });
 </script>
 
 <style lang="scss" scoped>
 ::v-deep .el-dialog {
    --el-dialog-padding-primary: 0px;
 }
 
 ::v-deep .el-dialog__header {
    padding: 10px 16px;
    border-bottom: 1px solid #f0f0f0;
    font-weight: bold;
 }
 
 ::v-deep .dialog-footer {
    padding: 10px 16px;
    border-top: 1px solid #f0f0f0;
 }
 
 ::v-deep .el-dialog__headerbtn .el-dialog__close {
    color: #000;
 }
 
 ::v-deep .el-dialog__body {
    padding: 10px 10px;
 }
 
 :deep(.el-form-item__label) {
    justify-content: flex-start;
 }
 
 :deep(.el-form-item) {
    flex-direction: column;
    margin-bottom: 7px;
 }
 
 :deep(.el-select__wrapper) {
    background: #fafcfb;
 }
 
 :deep(.el-badge__content.is-fixed) {
    color: #666;
    border-radius: 3px;
    padding: 4px;
 }
 
 :deep(.el-table .cell) {
    display: flex;
    justify-content: center;
 }
 
 :deep(.el-button:hover) {
    color: #6860ff;
    background: #f4f5f7;
 }
 
 :deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
    width: 100%;
 }
 
 :deep(.el-input__wrapper:hover) {
    box-shadow: inset 0 0 0 1px #6860ff;
 }
 
 .supply-products {
    margin-top: 20px;
 
    .title {
       display: flex;
       align-items: center;
       justify-content: space-between;
       margin-bottom: 10px;
       font-weight: bold;
 
       .title-text {
          display: flex;
          align-items: center;
 
          .line {
             height: 17px;
             width: 2px;
             border-radius: 12px;
             margin-right: 8px;
             background-color: #6860ff;
          }
       }
    }
 }
 
 .image-list {
    display: flex;
    gap: 8px;
 
    .el-image {
       width: 40px;
       height: 40px;
       border-radius: 4px;
    }
 }
 
 .Paratext {
    color: #d0d0d0;
    size: 2px;
 }
 </style>
 
